import { Form, Input, Button, message } from 'antd';
import './index.scss';
import { getCaptcha, register } from '@/services/api/user/user';
import { useNavigate } from 'react-router-dom';
import { RegisterUser } from '@/services/api/user/type';
export default function Register() {
  const [formData, setFormData] = useState<RegisterUser>();
  const [btnType, setBtnType] = useState(0);
  const [time, setTime] = useState(60);
  const navagate = useNavigate();
  const onFinish = useCallback(
    async (values: RegisterUser) => {
      if (values.password !== values.repassword) {
        message.error('两次密码不一致');
        return;
      }
      values.isAuth = false;
      const res = await register(values);
      if (res.code === 200) {
        navagate({ pathname: '/login' });
        message.success('注册成功');
      }
    },
    [navagate]
  );
  function changeHandle(values: any) {
    setFormData({ ...formData, ...values });
  }
  const getCaptchaAfter = useCallback(() => {
    setBtnType(1);
    const timer = setInterval(() => {
      setTime(time => {
        if (time === 0) {
          clearInterval(timer);
          setBtnType(0);
        }
        return time - 1;
      });
    }, 1000);
  }, []);
  async function sendCaptcha() {
    setTime(60);
    const email = formData?.email as string;
    const res = await getCaptcha({ to: email });
    if (res.code === 200) {
      getCaptchaAfter();
    }
  }
  function typeBtn() {
    return btnType === 0 ? (
      <Button type="primary" onClick={sendCaptcha}>
        发送验证码
      </Button>
    ) : (
      <Button type="primary">已发送（{time}）</Button>
    );
  }
  function switchCaptcha() {
    return (
      <Form.Item
        label="验证码"
        name="captcha"
        rules={[{ required: true, message: '请输入验证码!' }]}
      >
        <div className="captcha">
          <div className="captcha-input">
            <Input />
          </div>
          <div className="captcha-btn">{typeBtn()}</div>
        </div>
      </Form.Item>
    );
  }
  return (
    <>
      <div className="main">
        <div id="register-container">
          <h1>会议室预定系统</h1>
          <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
            onValuesChange={changeHandle}
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="昵称"
              name="nickName"
              rules={[{ required: true, message: '请输入昵称!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              label="确认密码"
              name="repassword"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              label="邮箱"
              name="email"
              rules={[{ required: true, message: '请输入邮箱!' }]}
            >
              <Input />
            </Form.Item>
            {switchCaptcha()}
            <Form.Item labelCol={{ span: 0 }} wrapperCol={{ span: 24 }}>
              <div className="links">
                <div
                  onClick={() => {
                    navagate({ pathname: '/login' });
                  }}
                >
                  已有账号？去登陆
                </div>
              </div>
            </Form.Item>

            <Form.Item labelCol={{ span: 0 }} wrapperCol={{ span: 24 }}>
              <Button className="btn" type="primary" htmlType="submit">
                注册
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
}
